<template>
  <div class="classify-select">
    <popup v-model="selectData" type="checkbox" @confirm="handleConfirm">
      <el-button v-if="!selectData.name">选择分类</el-button>
      <el-form-item label="商品分类" label-width="80px" v-if="selectData.name">
        <Tag @close="handleClose">
          <div class="classify-select-tag">{{ selectData.name | setleng }}</div>
        </Tag>
        <el-button type="text">修改</el-button>
      </el-form-item>
    </popup>
    <el-form-item label="显示件数" label-width="80px" v-show="selectData.name">
      <el-input type="text" maxlength="50" v-model="limit" @change="handleChange"> </el-input>
      <span class="classify-select-tips">最多添加50件商品</span>
    </el-form-item>
  </div>
</template>
<script type="text/javascript">
import popup from './index.vue';
import Tag from '@/components/tag.vue';
export default {
  components: {
    popup,
    Tag
  },
  props: {
    value: {
      type: [String, Number, Boolean, Object, Array],
      default: ''
    }
  },
  data() {
    return {
      limit: 20
    };
  },
  filters: {
    setleng: value => {
      if (value.length > 6) {
        return value.substring(0, 4) + '...';
      } else {
        return value;
      }
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    selectData: {
      get() {
        return this.value;
      },
      set(value) {
        let data = JSON.parse(JSON.stringify(value));
        data.limit = this.limit;
        this.$emit('input', data);
      }
    }
  },

  methods: {
    handleConfirm(data) {
      this.$emit('confirm', data);
    },
    /**
     * 关闭
     * @return {[type]} [description]
     */
    handleClose(index) {
      this.$emit('delete', {});
      this.selectData = {};
    },
    /**
     * 修改
     * @param  {[type]} value [description]
     * @return {[type]}       [description]
     */
    handleChange(value) {
      let data = JSON.parse(JSON.stringify(this.value));
      data.limit = this.limit;
      this.$emit('input', data);
    }
  }
};
</script>
<style lang="less" scoped>
@import './style.less';
</style>
